import React, { useState } from 'react'
import { AppstoreOutlined, ReadOutlined, SettingOutlined } from '@ant-design/icons';
import { Menu } from 'antd';
import { useNavigate, useLocation } from 'react-router-dom';
import { useEffect } from 'react';

export default function Aside() {
  const navigate = useNavigate()
  const location = useLocation()
  const [defaultKey, setDefaultKey] = useState('')

  useEffect(()=>{
    let path = location.pathname
    let key = path.split('/')[1]
    setDefaultKey(key)
  },[location.pathname])
  
  const onClick = (e) => {
    navigate('/'+e.key)
    setDefaultKey(e.key)
  };
  function getItem(label, key, icon, children, type) {
    return {
      key,
      icon,
      children,
      label,
      type,
    };
  }
  const items = [
    getItem('查看文章列表', 'list', <ReadOutlined />),
    getItem('文章编辑', 'edit', <AppstoreOutlined />),
    getItem('修改资料', 'means', <SettingOutlined />),
  ];
  return (
    <Menu
      className='aside'
      onClick={onClick}
      style={{
        width: 200,
      }}
      selectedKeys={[defaultKey]}
      mode="inline"
      items={items}
      // theme="dark"
    />
  )
}
